<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>无障碍助手示例</title>
    <link rel="stylesheet" href="src/styles.css" />
    <script src="src/AccessibilityHelper.js"></script>
  </head>
  <body>
    <!-- 页面内容 -->
    <div>
      <h1>示例页面</h1>
      <p>这是一段示例文字，用于测试无障碍助手的功能。</p>
      <img src="example.jpg" alt="这是一张示例图片" />
    </div>
    <a href="#" aria-label="返回首页">首页</a>
    <img src="logo.png" alt="网站Logo" title="点击返回首页" />
    <button aria-label="关闭弹窗">×</button>

    <!-- 初始化脚本 -->
    <script>
      accessibilityHelper = new AccessibilityHelper({
        enabledButtons: {
          zoom: true, // 启用缩放
          speech: true, // 启用朗读
          contrast: true, // 启用对比度
          plainText: true, // 启用纯文本
          font: false, // 禁用字体设置
          readingGuide: true, // 启用阅读指引
          hoverRead: true, // 启用悬浮朗读
          rate: true, // 启用语速控制
          animation: false, // 禁用动画控制
          colorFilter: false, // 禁用色盲模式
        },
        initiallyVisible: true,
        hoverDelay: 500,
        defaultLang: 'zh-CN',
        ttsEnabled: true,
        imageAltEnabled: true,
      })
    </script>
  </body>
</html>
